<template>
  <div>


    <el-upload
      id="file1"
      v-model="medioData"
      ref="upload"
      class="avatar-uploader1"
      action="https://admin.cqjftc.com/jfEmployee/pic/upload"
      :show-file-list="false"
      :accept="accept"
      :multiple="multiple"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <div  @click="change"  v-if="medioData"  style="text-align: left;">
        <el-tag
                style="margin-right: 5px;margin-top:5px;height:auto;padding-top: 10px;"
                closable @close="deleTag()">
          <div class="headimg" :style="{ 'background-image': 'url('+medioData+ ')' }"></div>
        </el-tag>
      </div>
      <div class="item_add" v-else @click="change"  style="margin-top: 10px">
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>

    <!--点击放大图片-->
    <!--<div class="c_viewImg" v-if="viewImgShow" style="position: fixed;left: 0;top: 0;background: white;height: 100%;width: 100%;z-index: 99">-->
      <!--<img :src="viewImg" alt="" style="width: 96%;height: auto;margin-left: 2%;margin-top: 10px" @click="viewImgShow=!viewImgShow">-->
    <!--</div>-->
    <el-dialog title="查看图片" :visible.sync="viewImgShow" width="60%" :modal-append-to-body="false">
      <img :src="viewImg" alt="" style="width: 98%" @click="viewImgShow=!viewImgShow">
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "MyUpload",
    props:{
      /*
      * more:是否支持多选上传
      */
      multiple:{
        type:Boolean,
        default:false,
      },
      /*
      * accept:上传文件类型
     */
      accept:{
        type:String,
        default:'image/*',
      },
      medioData1:String
    },
    mounted(){
      this.img=document.getElementById('file1')
      this.medioData=this.medioData1
    },
    data(){
      return{
        medioData:'',
        show2:false,
        img:'',
        fileList:[],
        viewImgShow:false,
        viewImg:'',
      }
    },
    methods:{
      // 放大查看图片
      seeImg(data){
        console.log('放大查看图片=============')
        console.log(data)
        this.viewImgShow=true
        this.viewImg=data
      },
      change(){
        this.img.click()
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1);
        console.log('fileList')
      },
      //上传图片完成的钩子
      handleSuccess(res, file) {
        console.log(res)
        let thi=this
        thi.medioData=res.url
        this.$store.state.login.Loading = false
        thi.$emit('change',thi.medioData);
      },
      // 上传图片前的钩子
      beforeUpload(file) {
        console.log(file)
        if(this.accept=='image/*'){
          const isJPEG = file.type === 'image/jpeg';
          const isJPG = file.type === 'image/jpg';
          const isPNG = file.type === 'image/png';
          const isgif = file.type === 'image/gif';
          const isLt2M = file.size / 1024 / 1024 < 10;
          var isIMG = true
          this.$store.state.login.Loading = true
          if (!isJPG && !isJPEG && !isPNG && !isgif) {
            this.$store.state.login.Loading = false

            this.$message.error('请上传jpeg/png/jpg格式的图片');
            isIMG = false
          }
          if (!isLt2M) {
            this.$store.state.login.Loading = false
            this.$message.error('上传头像图片大小不能超过 10MB!');
          }
          return isIMG && isLt2M;
        }
      },
      /*删除图片*/
      deleTag(index) {
        let thi=this
        this.$message.success( '删除成功');
        thi.medioData='';
        thi.fileList = []
        thi.$emit('changedel',index);
      },
    }
  }
</script>

<style  scoped>


  .dialog-demo {

  }
  /*.dialog-demo .weui-dialog{*/
    /*border-radius: 8px;*/
    /*padding-bottom: 8px;*/
  /*}*/
  .btn{
    background: #0bb20c;
    color: white;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
    border: none;
    outline: none;
    letter-spacing: 3px;

  }
  .item_add{
    width: 55px;
    height: 55px;
    line-height: 55px;
    border: 1px dashed #c0ccda ;
    border-radius: 6px;
    text-align: center;
    color: #8c939d;
  }
  .item_add:hover{
    border-color: #409EFF;
  }
  .headimg{
    width: 66px;
    height: 66px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

</style>
